<template>
  <view class="page">
    <view class="header">
      <view class="nav-left">
        <uni-icons type="left" size="20" color="#000000" />
      </view>
      <view class="nav-title">我推荐的用户</view>
      <view class="nav-right">
        <uni-icons type="more-filled" size="20" color="#000000" />
      </view>
    </view>
    <view class="content">
      <view class="tab-wrapper">
        <view
          class="tab-item"
          :class="{ active: activeTab === 'direct' }"
          @click="switchTab('direct')"
        >
          直推({{ directList.length }})
          <view class="tag-line" v-show="activeTab === 'direct'"></view>
        </view>
        <view
          class="tab-item"
          :class="{ active: activeTab === 'indirect' }"
          @click="switchTab('indirect')"
        >
          间推({{ indirectList.length }})
          <view class="tag-line" v-show="activeTab === 'indirect'"></view>
        </view>
      </view>
      <view class="recommend-list">
        <view
          class="recommend-item"
          v-for="(item, index) in currentList"
          :key="index"
        >
          <img class="avatar" :src="item.avatar" mode="aspectFill" />
          <view class="info">
            <view class="name">{{ item.name }}</view>
            <view class="status">{{ item.status }}</view>
            <view class="time">{{ item.time }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'direct',
      directList: [
        {
          avatar:
            "https://ai-public.mastergo.com/ai/img_res/1a581ec9d3cba1a2a785d3c2c9a36e14.jpg",
          name: "健康运动达人",
          status: "已购499元健康卡 获得10健康豆",
          time: "2023-12-20 12:30",
        },
        {
          avatar:
            "https://mastergo.com/ai/api/search-image?query=icon, minimalist 3D sports avatar, high quality details, prominent main subject, clear and sharp, subject fills 80 percent of frame, isolated on white background, centered composition, soft lighting, subtle shadows, modern style&width=100&height=100&orientation=squarish",
          name: "运动小达人",
          status: "已购499元健康卡 获得10健康豆",
          time: "2023-12-20 11:30",
        },
        {
          avatar:
            "https://mastergo.com/ai/api/search-image?query=icon, minimalist 3D sports avatar, high quality details, prominent main subject, clear and sharp, subject fills 80 percent of frame, isolated on white background, centered composition, soft lighting, subtle shadows, modern style&width=100&height=100&orientation=squarish",
          name: "快乐运动家",
          status: "已购499元健康卡 获得10健康豆",
          time: "2023-12-20 10:30",
        },
      ],
      indirectList: [
        {
          avatar:
            "https://mastergo.com/ai/api/search-image?query=icon, minimalist 3D sports avatar, high quality details, prominent main subject, clear and sharp, subject fills 80 percent of frame, isolated on white background, centered composition, soft lighting, subtle shadows, modern style&width=100&height=100&orientation=squarish",
          name: "间推用户A",
          status: "已购299元健康卡 获得5健康豆",
          time: "2023-12-19 15:30",
        },
        {
          avatar:
            "https://mastergo.com/ai/api/search-image?query=icon, minimalist 3D sports avatar, high quality details, prominent main subject, clear and sharp, subject fills 80 percent of frame, isolated on white background, centered composition, soft lighting, subtle shadows, modern style&width=100&height=100&orientation=squarish",
          name: "间推用户B",
          status: "已购299元健康卡 获得5健康豆",
          time: "2023-12-19 14:30",
        },
      ]
    };
  },
  computed: {
    currentList() {
      return this.activeTab === 'direct' ? this.directList : this.indirectList;
    }
  },
  methods: {
    switchTab(tab) {
      this.activeTab = tab;
    }
  }
};
</script>

<style>
page {
  height: 100%;
}
.page {
  background: #ffffff;
  min-height: 100%;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 32rpx;
  background: #ffffff;
  border-bottom: 1px solid #f5f5f5;
}
.nav-left {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
}
.nav-title {
  font-size: 18px;
  font-weight: 500;
  color: #333333;
}
.nav-right {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.content {
  padding: 32rpx;
}
.tab-wrapper {
  display: flex;
  gap: 48rpx;
  margin-bottom: 32rpx;
}

.tab-item {
  position: relative;
  font-size: 16px;
  color: #999999;
  font-weight: 400;
  padding: 8rpx 0;
  cursor: pointer;
}

.tab-item.active {
  color: #4caf50;
  font-weight: 500;
}

.tag-line {
  position: absolute;
  bottom: -4rpx;
  left: 0;
  width: 100%;
  height: 4rpx;
  background: #4caf50;
  border-radius: 2px;
}
.recommend-list {
  padding: 0 16rpx;
}
.recommend-item {
  display: flex;
  align-items: flex-start;
  padding: 32rpx 0;
  border-bottom: 1px solid #f5f5f5;
}
.avatar {
  width: 96rpx;
  height: 96rpx;
  border-radius: 48rpx;
  margin-right: 24rpx;
  flex-shrink: 0;
}
.info {
  flex: 1;
}
.name {
  font-size: 16px;
  color: #333333;
  margin-bottom: 8rpx;
  font-weight: 400;
}
.status {
  font-size: 14px;
  color: #4caf50;
  margin-bottom: 8rpx;
}
.time {
  font-size: 12px;
  color: #999999;
}
</style>